<template>
    <hooyn-nav-bar 
        class="header" 
        leftIcon="" 
        :title="($route.query.title || '园区')" 
        backgroundColor="#6aa2f9" 
        :leftIconfont="false" 
        leftIconColor="#fff"
        fontSize="1rem"
        color="#fff"
        :returnNav="false">
    </hooyn-nav-bar>
    <div class="detail-box">
        <div class="banner">
            <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/'+state.dataitem.imgs[0].url" v-if="state.dataitem.imgs" >
            <!-- <img src="../../assets/park-detail.png" alt="" v-if="state.index==1">
            <img src="../../assets/jiyudax.png" alt="" v-if="state.index==2">
            
        <img src="../../assets/aili.png" v-if="state.index==0">
        <img src="../../assets/sdian.png" v-if="state.index==3">
        <img src="../../assets/jiang.png" v-if="state.index==4">
        
        <img src="../../assets/hegui.png" v-if="state.index==5"> -->
        </div>
        <div class="address">
            <img class="address-img" src="../../assets/address.png" alt="">
            <span>
                {{  state.dataitem.Address }}
            </span>
        </div>
        <div class="area">
            <div class="gross-area">
                <span class="red">{{ state.dataitem.LandAreaitem }}</span>
                <span>总用地面积</span>
            </div>
            <div class="floor-area">
                <span class="red">{{  state.dataitem.BuildingAreaitem }}</span>
                <span>建筑面积</span>
            </div>
        </div>

        <div class="textarea">
            {{ lsit }}
            <div class="arrow" :class="{'arrow-top': state.shwoIntro, 'arrow': true}">
                <img v-if="state.dataitem.Decription.length > state.introLenght" @click="state.shwoIntro = !state.shwoIntro" src="../../assets/arrow-down.png" alt="">
            </div>
        </div>

        <div class="serve">
            <div class="card-header">
                <div>特色服务</div>
            </div>
            <div class="textarea" v-html="state.dataitem.Featured ">
            </div>
           
            <ul>
                <li>
                    <div class="img-box"><img src="../../assets/park-one.png" alt=""></div>
                    <div class="text">
                        <span class="small">产权单位/运营单位</span>
                        <span class="bottom">{{ state.dataitem.Industrial }}</span>
                    </div>
                </li>
                <li>
                    <div class="img-box"><img src="../../assets/park-two.png" alt=""></div>
                    <div class="text">
                        <span class="small">联系人及联系方式</span>
                        <span class="bottom">{{  state.dataitem.Contact }}{{  state.dataitem.Phone}}</span>
                    </div>
                </li>
                <li>
                    <div class="img-box"><img src="../../assets/park-three.png" alt=""></div>
                    <div class="text">
                        <span class="small">合作形式</span>
                        <span class="bottom">{{state.dataitem.Cooperation?state.dataitem.Cooperation:'暂无内容'}}</span>
                    </div>
                </li>
                <li>
                    <div class="img-box"><img src="../../assets/park-four.png" alt=""></div>
                    <div class="text">
                        <span class="small">招引产业意向</span>
                        <span class="bottom">{{
                        state.dataitem.Intention? state.dataitem.Intention:'暂无内容'}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
const route = useRoute()


import $api from '@/utils/api'
const state = reactive({
    introLenght: 100,
    shwoIntro: false,
    dataitem:'',
    index:0,
    lsit:'',
    data:[
    {
        intro: '爱商科技工业园，环境优美、配套设施齐全、道路交通四通八达。现有厂房11栋共计8.5万平方米，员工宿舍5栋共计2.2万平方米，商业配套3493平方米，6台变压器(总容量8130KVA)。',
        lsit:[
        {
            item:'全新厂房面积3.8万平方米，宿舍7000平方米，具体情况如下:'
        },
        {
            item:'1.工业厂房:单栋面积15900m，单层面积2650m;承重限额楼上800kg/㎡;层高1楼5.5m，2楼4.5m，3-6楼4m;每栋配2部2T货梯;配电1800KVA;'
        },
        {
            item:'2.研发办公楼:单层面积1100m，6层总面积6600m，层高1楼5.5m，2楼4.5m，3-6楼4m;配客货一体电梯1部;'
        },
        ],
        address:'宝安区燕罗街道燕川社区红湖路108号',
        build:'4.9万m²',
        unit:'11.1万m²',
        unitlist:'深圳爱商精密电子有限公司',
        phone:'夏郑杰15875507055',
        cooperation:'租赁/联合运营',
        industries:'智能智造、高端电子信息、新材料、大数据、5G的相关产业企业',
    },
     {
        intro: '富比伦鹏洲科技园由两栋11层高的办公、生产为一体的大楼及一栋12层高的公寓大楼组成，目前园区集科技创新、电子信息技术、航空航天技术等的基础上着力引进深圳市重点发展的生物、新能源、互联网等新兴产业。',
        honor: '国家高新技术企业、国家级制造业单项冠军企业国家级知识产权优势企业、国家级企业技术中心、广东省智能制造企业、深圳市环境安全标准化管理"双百“示范企业、深圳市危险废物规范化管理”双百“示范企业、规上企业、2023年厂省制造业企业500强(第21位）。',
        lsit:[
        {
            item:'园区通过申请产业提容方式新建一栋以新型高科技术开发为主的普通工业用房，新增建筑面积共1.35万m?，共12层，每层约1100m2，其中第一层层高6m，其他楼层层高4.2m，承重500kg/m?。'
        },
        {
            item:'项目的空间规划布局如下:2~6 层为特殊厂房(新型低碳建筑材料腻子粉)、7-8 层为无偿移交政府为创新型产业用房、9-12层为产品研发中心、产品孵化中心、实验应用中心。'
        }
        ],
        address:'深圳市宝安区罗燕街道朝阳路78号',
        build:'1.8万m²',
        unit:'5.8万m²',
        unitlist:'深圳市富比伦高新实业有限公司',
        phone:'苟总13823516887',
        cooperation:'租赁/联合运营',
        industries:'计划引入高科技研发企业，拟打造创新型产业园区',
    },
    {
        intro: '项目配有1栋最高层为20层的厂房，1栋最高层为18层的宿舍，公共配套设施(其中含社区警务室，社区管理用房，便民服务站，社区健康服务中心，微型消防站，社区级公共配套用房，小型垃圾转运站(含再生资源回收站,公共厕所，环卫工人作息房)，另配建1处社区体育活动场地附设于裙房屋顶。',
        lsit:[
        {
            item:'1栋研发办公29750平方米，1栋人才公寓7580平方米，园区配套8台高速电梯(4台客梯，4台货梯)，能最大限度解决拥挤问题，层高4.5-6米，标准层高4.5米，承重限额650-1200kg/m，269个停车位次(含充电桩车位27个)，平均租金按周边市场价。'
        },
        ],
        address:'深圳市金环宇新材料有限公司',
        build:'7081.86m²',
        unit:'54864m²',
        unitlist:'深圳市金环宇新材料有限公司',
        phone:'陈桂鹏18718575108',
        cooperation:'租赁/联合运营',
        industries:'拟打造高端智能制造业产业集聚基地，以半导体与新材料为主导产业，以优质环境融合高端制造资源，引领品质创新空间塑造，为企业高质量发展持续赋能领跑。',
    },
    
    {
        intro: '时代方舟大厦项目共有1栋研发办公楼约36290平方米，1栋配套宿会约10980平方米，拥有约189间宿舍、约3000平方米商业配套。项目临松白路与沙江路两条城市主干道，629、635、B775、M234、M242等多条公交路线经过，同时距离地铁6号线薯田埔站约600米，交通较为便利。项目周边约2公里内有松制关虹、联投东方PARK、星港城购物中心、沃尔玛等商圈配套，生活较为方便。。',
        lsit:[
        {
            item:'研发办公楼:面积约36290平方米，拟引进世界百强企业、隐形冠军企业及海归科研办公等。'
        },
        ],
        address:'深圳市宝安区燕罗街道松白路7014号',
        build:'8637.52m²',
        unit:'51830m²',
        unitlist:'深圳市名德投资有限公司',
        phone:'黄佳琳13480113533',
        cooperation:'租赁/联合运营',
        industries:'项目拟打造创新科研产业、互联网平台总部基地。',
    },
    {
        intro: '劲嘉产业园生态保护用地5.26万㎡(78.9亩)，容积率1.24。园区总建筑面积为31万㎡，目前已全部建设完成，其中厂房及办公用房面积22.6m，生活及配套面积8.4万。共厂房5栋，研发办公楼1栋，宿舍楼5栋，食堂1栋。为亚洲单体规模较大的包装印刷产业园区，集绿色包装印刷、科技智能、节能环保、生态园林于一体。',
        lsit:[
        {
            item:'1、烟标。在现在年营收11亿基础上，每年保持8%左右的增速。'
        },
        {
            item:'2、智能包装。精品包装、手机盒等电子消费品包装酒包装以及电子烟，每年增速20%左右。'
        },
        {
            item:'3、物联信息产业。包装物联网大数据中心设在产业园。研发高技术芯片包装，提升本公司产品附加值，广泛应用于包装物。'
        },
        {
            item:'4、健康产业。围绕抗衰、抗癌开发生物制药。目前基本落实的产品有:多肽药、玻尿酸药、剂，3D打印及隐形矫廉掯盟兩ệ豹茈欺擴後拜皴探鉄验贷聰震硌角驕和齿等项目。'
        },
        ],
        address:'深圳市宝安区燕罗街道燕山大道6-6号',
        build:'24.75万m²',
        unit:'19.49万m²',
        unitlist:'暂无内容',
        phone:'李娜13129531101',
        cooperation:'暂无内容',
        industries:'暂无内容',
    },
    {
        intro: '和谷山汇城项目共有4栋产业研发办公楼126788平方米，1栋宿舍约13546平方米。项目配有267间宿舍、4套商业、7个公共配套(含公交首末站、社区警务室、便民服务站、文化活动室、社区健康服务中心、邮政所、场%公共充电站)。',
        lsit:[
        {
            item:'1、研发办公楼:面积126788平方米，平均租金(待定)元/m²·月;管理费用3.98元/m²·月'
        },
        {
            item:'2、宿舍:面积13546平方米，平均租金(待定)元/㎡月;管理费用3.98元/m²·月'
        },
        
        ],
        address:'深圳市宝安区燕罗街道罗田社区广田路与罗瑞路交汇处',
        build:'23342.50m²',
        unit:'177621.86m²',
        unitlist:'深圳市和谷投资有限公司',
        phone:'吴裕群13066900555',
        cooperation:'租赁/联合运营',
        industries:'计划引入高科技研发企业，拟打造新能源、网络通信、智能终端为一体的创新型产业园区。',
    },
    ]
   

})

const lsit = computed(() => {
    if (state.shwoIntro) {
        return state.dataitem.Decription 
    } else {
        let str = ''
        if (state.dataitem.Decription.length <= state.introLenght ) {
            str = state.dataitem.Decription
        }else {
            str = state.dataitem.Decription.substring(0,state.introLenght)  + '...'
        }
      
        return str
    }
})
const Detailsofthe = () => {
    $api.Detailsofthepark({ID:route.query.item}).then(res=> {
        if (res.message != '') {
            state.dataitem = res.message[0]
        }
    })
   }
   watch(() => route.query.item, () => {
  if (route.name === 'ParkDetail' && route.query.item) {
    Detailsofthe()
  }
}, {
  deep: true,
  immediate: true
})
onMounted(() =>{
    state.index=route.query.item
})
</script>
<style lang='scss' scoped>
.detail-box {
    width: 100vw;
    padding: 1rem;
    color: #333;
}
.banner {
    width: 100%;
    height: 13rem;
    img {
        width: 100%;
        height: 100%;
    }
}

.address {
    display: flex;
    padding: .75rem 0px;
    align-items: center;
    font-size: .875rem;
    .address-img {
        height: 1.3rem;
        margin-right: .375rem;
        margin-left: -2px;
    }
}

.area {
    background: #f2f2f2;
    width: 100%;
    display: flex;
    padding: 1.125rem 0px;
    >div {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .gross-area {
        border-right: 1px solid rgb(209, 181, 181);
    }
    .red {
        color: #d63636;
        font-size: 1.5rem;
        margin-bottom: 4px;
    }
  
}

.textarea {
    font-size: .875rem;
    text-indent: 1.75rem;
    padding: .75rem 0rem 0rem;
    line-height: normal;
    &+.textarea {
        padding-top: 0rem;
    }
}

.serve {
    ul {
        margin-top: .75rem;
        li {
            display: flex;
            align-items: flex-start;
            padding: 10px 0px;
            .img-box {
                width: 2.4rem;
                height: 2.4rem;
                background: rgba(108, 162, 249, 0.15);
                border-radius: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: .375rem;
                img {
                    width: 1.3rem;
                    height: 1.3rem;
                }
            }
            .text {
                width: calc(100% - 2.675rem);
                display: flex;
                flex-direction: column;
                span:nth-child(1) {
                    font-size: .875rem;
                    color: #878787;
                }

                span:nth-child(2) {
                    font-size: .9375rem;
                }
            }
        }
    }
}

.arrow {
    text-align: right;
    bottom: 0px;
    img {
        width: 1.2rem;
        height: 1.2rem;
        position: relative;
        top: 2px;
    }
    &.arrow-top {
        img {
            transform: rotateZ(180deg);
        }
    }
}
</style>